<template>
    <el-card shadow="never" class="aui-card--fill">
      <el-form :inline="true" v-model="SearchForm"  @keydown.enter.native.prevent="getDataList()">
        <el-form-item>
          <el-input v-model="SearchForm.tusername" placeholder="指导老师" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
          <el-button  type="danger" @click="del()"
            :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading" 
        @selection-change="selectionChangeHandle">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="teaName" header-align="center" align="center" :show-overflow-tooltip="true" label="指导老师">
        </el-table-column>
        <el-table-column prop="teaname1" header-align="center" align="center" :show-overflow-tooltip="true" label="答辩老师1">
        </el-table-column>
        <el-table-column prop="teaname2" header-align="center" align="center"  :show-overflow-tooltip="true" label="答辩老师2">
        </el-table-column>
        <el-table-column prop="teaname3" header-align="center" align="center" :show-overflow-tooltip="true" label="答辩老师3">
        </el-table-column>
        <el-table-column prop="teaname4" header-align="center"  :show-overflow-tooltip="true" align="center" label="答辩老师4">
        </el-table-column>
        <el-table-column prop="starttime" header-align="center" :show-overflow-tooltip="true" align="center" label="答辩时间">
        </el-table-column>
        <el-table-column prop="place" header-align="center" align="center" label="答辩教室">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改
            </el-button>
            <el-button type="text" size="small" @click="del(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
  </template>
    
<script>
  // @ is an alias to /src
  import servicesApi from '@/services/servicesApi';
  import debounce from 'lodash/debounce';
  import AddOrUpdate from '@/views/Teacher/arrange-add'
  export default {
    data() {
      return {
        SearchForm: {
            tusername: '',
        },
        dialogVisible: false,
        title: '新增',
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListSelections: [],
        dataListLoading: false,
        addOrUpdateVisible: false,
        deleteList: {
                list: []
             },
        dataList: [
          {
            userId: 46,
            tusername: 'teacher',
            teaName: 'ldq1',
            teaname1: '1111',
            teaname2: '',
            teaname3: '',
            teaname4: '',
            starttime: '',
            place: ''
          }
        ]
      }
    },
    created() {
      this.getDataList()
    },
    components: {
      AddOrUpdate
    },
    methods: {
      //删除
      del(id) {
        let roleIds = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.deleteList.list = roleIds
        servicesApi.delTarrange(this.deleteList).then(res => {
            // console.log(res.data)
            let code = res.data.code
            if (code === 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration: 1000,
                    onClose: () => {
                        this.getDataList()
                    }
                })
            } else {
                this.$message({
                    message: res.data.msg,
                    type: 'danger',
                    duration: 1000,
                    onClose: () => {
                        this.getDataList()
                    }
                })
            }
        })
    },
      // 获取数据列表
      getDataList: debounce(function() {
        this.dataListLoading = true
        let pageInfo = {
        current: this.pageIndex,
        size: this.pageSize,
        name: this.SearchForm.tusername
      }
        servicesApi.yuanfindarrangeApi(pageInfo).then(res => {
          // console.log(res.data)
          let code = res.data.code
          let data = res.data.data
          if (code === 200 && data) {
            this.dataList = data.records
            this.totalPage = data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      }, 1000, { 'leading': true, 'trailing': false }),
      // 新增 / 修改
      addOrUpdateHandle(row) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          // 当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来
          this.$refs['addOrUpdate'].init(row)
        })
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    },
  }
  </script>
    